<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
  <meta charset="UTF-8">
  <title th:text="JSON可视化化工具"></title>
  <link rel="stylesheet" th:href="@{/css/styles.css}" >
  <link rel="stylesheet" th:href="@{/js/json-tool/css/bootstrap.min.css}">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script th:src="@{/js/json-tool/js/jquery.min.js}"></script>
  <script th:src="@{/js/json-tool/js/popper.min.js}"></script>
  <script th:src="@{/js/json-tool/js/bootstrap.min.js}"></script>
  <script th:src="@{/js/json-tool/js/clipboard.min.js}"></script>
  <link rel="stylesheet" th:href="@{/js/json-tool/css/jquery.json-viewer.min.css}" />
  <script th:src="@{/js/json-tool/js/jquery.json-viewer.min.js}"></script>
  <script th:src="@{/js/gdoj.js}"></script>
</head>
<style>
  body, html {background-color: #eee;!important;}
</style>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
  <div class="content" >
    <div class="content-no-sidebar">
      <h4 class="mb-3">JSON可视化化工具</h4>
      <div style="width:50%; float:left;">
        <div style="margin-right: 6px;">
          <div class="row mb-3" style="height: 40px;">
            <div class="col">
              <button class="btn btn-success btn-block" id="format">格式化</button>
            </div>
            <div class="col">
              <button class="btn btn-info btn-block copybtn" id="copy">复制</button>
            </div>
            <div class="col">
              <button class="btn btn-danger btn-block" id="clean">清空</button>
            </div>
          </div>
          <div class="form-group mb-3">
            <div id="source" class="source-box"></div>
          </div>
        </div>
      </div>
      <div style="width: 50%; float:right">
        <div class="row mb-3" style="height: 40px;">
          <div class="col">
          </div>
          <div class="col">
          </div>
          <div class="col">
          </div>
        </div>
        <pre id="json" style="font-size: 12px; border: 1px solid #d6d9dc; border-radius: 0.25rem;"></pre>
      </div>
    </div>
  </div>
  <div th:replace="common::web-footer"></div>
</div>
<script th:src="@{/js/messager.js}"></script>
<script th:src="@{/js/monaco-editor/min/vs/loader.js}"></script>
<script type="text/javascript">
  $(document).ready(function() {
    var editor = null;

    function loadDefaultJson() {
      var default_str = "{\"title\":\"OJ list\",\"data\":[{\"OJ\":\"HappyOJ\",\"url\":\"happyoj.com\"},{\"OJ\":\"Codeforces\",\"url\":\"codeforces.com\"}]}"
      var data = JSON.stringify(JSON.parse(default_str), null, 4)
      editor.setValue(data);
      editor.layout();
      $("#json").jsonViewer(JSON.parse(editor.getValue()));
    }

    var createJsonEditor = function () {
      require.config({paths: {'vs': '/js/monaco-editor/min/vs'}});
      require(['vs/editor/editor.main'], function () {
        editor = monaco.editor.create(document.getElementById("source"), {
          value: [].join('\n'),
          language: "json",
          fontSize: '12px',
          automaticLayout: true,
          scrollBeyondLastLine: false,
          minimap: {
            enabled: false
          },
        });
        if (editor) {
          editor.layout();
          loadDefaultJson();
        }
      });
    }
    createJsonEditor();

    $("#format").click(function () {
      try {
        var data = JSON.stringify(JSON.parse(editor.getValue()), null, 4)
        editor.setValue(data);
        editor.layout();
        $("#json").jsonViewer(JSON.parse(editor.getValue()));
      } catch(err) {
        $("#json").html(err);
        $.messager.show('提示', '格式化失败:' + err, 5000);
      }
    });

    $("#copy").click(function () {
      navigator.clipboard.writeText(editor.getValue());
      $.messager.show('提示', '已复制到粘贴板', 5000);
    });

    $("#clean").click(function () {
      editor.setValue('\n' +
              '\n' +
              '\n' +
              '\n' +
              '\n');
      editor.layout();
      $("#json").html("");
    });
  });
</script>
</body>
</html>
